<template>
  <div>

      <!-- <div>
        <a-range-picker
          :ranges="{ '今日': [moment().startOf('day'), moment().endOf('day')],
                     '本周': [moment().startOf('week'), moment().endOf('week')],
                     '本月': [moment().startOf('month'), moment().endOf('month')] }"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          @ok="getStartTimeAndEndTime"
        />
      </div> -->

    <div id="myPai" :style="{width: '500px', height: '500px'}"></div>
  </div>


</template>

<script>
  import { getAction } from '@/api/manage'
  import moment from 'moment';
    export default {
        name: "test",
        data () {
          return {
            msg: 'Welcome to Your Vue.js App',
            startTime:'',
            endTime:''
          }
        },
        mounted(){
          this.getData(this.startTime,this.endTime);
        },
        methods: {
          moment,
          getStartTimeAndEndTime(dates){
            this.startTime = moment(dates[0]._d).format('YYYY-MM-DD HH:mm:ss')
            this.endTime = moment(dates[1]._d).format('YYYY-MM-DD HH:mm:ss')
            this.getData(this.startTime,this.endTime);
          },
          drawLine(statusName,data){
            // 基于准备好的dom，初始化echarts实例
            let myPai = this.$echarts.init(document.getElementById('myPai'))
            // 绘制图表
            myPai.setOption({
              title : {
                text: '订单情况',
                subtext: '',
                x:'center'
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: statusName
              },
              series : [
                {
                  name: '',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:data,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
          },
          getData(startTime,endTime) {
            if(startTime == '' && endTime == ''){
              startTime = moment().startOf('day').format("YYYY-MM-DD HH:mm:ss");
              endTime = moment().endOf('day').format("YYYY-MM-DD HH:mm:ss");
            }
            let this_ = this;
            this.$nextTick(function () {
              getAction("/orderChart/pieChart",{startTime,endTime})
                .then(res => {
                  if (res.success) {
                      //遍历数组，取出数据
                      let statusName=[],data=[],obj={}
                    for (let key in res.data) {
                      statusName.push(key);
                      obj = {value:res.data[key],name:key};
                      data.push(obj);
                    }
                      this_.drawLine(statusName,data);
                    } else {
                      this_.drawLine([], [], [],[]);
                      this_.$message.warn("无结果");
                  }
                })
                .catch(err => {
                });
            })
          },
        },
    }
</script>

<style scoped>

</style>